<template>
  <div class="footer">
    <div class="footer-wrap">
      <div class="footer-list">
        <div class="footer-item">
          <div class="footer-item-title">购物指南</div>
          <span>购物流程</span>
          <span>会员介绍</span>
          <span>生活旅行/团购</span>
          <span>常见问题</span>
          <span>购物指南</span>
        </div>
        <div class="footer-item">
          <div class="footer-item-title">配送方式</div>
          <span>上门自提</span>
          <span>211限时达</span>
          <span>配送服务查询</span>
          <span>配送费收取标准</span>
          <span>海外配送</span>
        </div>
        <div class="footer-item">
          <div class="footer-item-title">支付方式</div>
          <span>货到付款</span>
          <span>在线支付</span>
          <span>分期付款</span>
          <span>邮局汇款</span>
          <span>公司转账</span>
        </div>
        <div class="footer-item">
          <div class="footer-item-title">售后服务</div>
          <span>售后政策</span>
          <span>价格保护</span>
          <span>退款说明</span>
          <span>返修/退换货</span>
          <span>取消订单</span>
        </div>
        <div class="footer-item">
          <div class="footer-item-title">特色服务</div>
          <span>夺宝岛</span>
          <span>DIY装机</span>
          <span>延保服务</span>
          <span>尚品汇E卡</span>
          <span>尚品汇通信</span>
        </div>
        <div class="footer-item">
          <div class="footer-item-title">帮助中心</div>
          <img src="./images/wx_cz.jpg" alt="wx_cz">
        </div>
      </div>
      <div class="footer-nav">
        <span>关于我们</span>
        <span>联系我们</span>
        <span>关于我们</span>
        <span>商家入驻</span>
        <span>营销中心</span>
        <span>友情链接</span>
        <span>关于我们</span>
        <span>营销中心</span>
        <span>友情链接</span>
        <span class="footer-nav-last">关于我们</span>
      </div>
      <p class="footer-text">地址：北京市昌平区宏福科技园综合楼6层</p>
      <p class="footer-text">京ICP备19006430号</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XFooter',
}
</script>

<style lang="less" scoped>
.footer{
  background-color: #eaeaea;
  padding: 30px 0 30px;
}
.footer-wrap{
  width: 1200px;
  margin: 0 auto ;
}
.footer-list{
  display: flex;
  justify-content: space-around;
  padding-bottom: 30px;
  border-bottom: 1px solid #e4e1e1;
}
.footer-item{
  display: flex;
  // 布局的排列方向 （默认主轴排列方向）
  //  显示为列 方向为在垂直方向上从上到下
  flex-direction: column;
  img{
    width: 121px;
  }
  .footer-item-title{
    font-size: 14px;
  }
  span{
    margin-top: 3px;
  }
}
.footer-nav{
  padding-top:20px ;
  text-align: center;
  span{
    border-right: 1px solid #000;
    padding: 0 10px;
  }
  .footer-nav-last{
    padding: 0 0 0 10px;
    border: none;
  }
}
.footer-text{
  text-align: center;
  margin-top: 10px;
}
</style>
